<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Spring Core Online Tutorial - Product Form</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.4/css/bootstrap.min.css"
          th:href="@{/webjars/bootstrap/3.3.5/css/bootstrap.min.css}"
          rel="stylesheet" media="screen"/>

    <script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.min.js"
            th:src="@{/webjars/jquery/2.1.4/jquery.min.js}"></script>

    <link href="../../static/css/spring-core.css"
          th:href="@{css/spring-core.css}" rel="stylesheet" media="screen"/>
</head>
<body>
<div class="container">

    <h2>Product Details</h2>
    <div>
        <form class="form-horizontal" th:object="${productForm}" th:action="@{/product}" method="post">

            <div th:if="${#fields.hasErrors('*')}" class="alert alert-danger">
                <p th:text="#{form.hasErrors}">Error Message</p>
            </div>

            <input type="hidden" th:field="*{id}"/>

            <div class="form-group" th:class="${#fields.hasErrors('description')} ? 'form-group has-error' : 'form-group'">
                <label class="col-sm-2 control-label">Description:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" th:field="*{description}" th:errorclass="has-error"/>

                    <span class="help-block">
                       <ul>
                           <li th:each="err : ${#fields.errors('description')}" th:text="${err}" />
                       </ul>
                    </span>
                </div>
            </div>

            <div class="form-group" th:class="${#fields.hasErrors('price')} ? 'form-group has-error' : 'form-group'">
                <label class="col-sm-2 control-label">Price:</label>
                <div class="col-sm-10">
                    <input type="number" min="0" max="5000" step="0.01" class="form-control" th:field="*{price}" th:errorclass="has-error"/>

                    <span class="help-block">
                       <ul>
                           <li th:each="err : ${#fields.errors('price')}" th:text="${err}" />
                       </ul>
                    </span>
                </div>
            </div>

            <div class="form-group" th:class="${#fields.hasErrors('imageUrl')} ? 'form-group has-error' : 'form-group'">
                <label class="col-sm-2 control-label">Image Url:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" th:field="*{imageUrl}" th:errorclass="has-error"/>

                    <span class="help-block">
                       <ul>
                           <li th:each="err : ${#fields.errors('imageUrl')}" th:text="${err}" />
                       </ul>
                    </span>
                </div>
            </div>
            <div class="row">
                <button type="submit" class="btn btn-default">Submit</button>
            </div>
        </form>
    </div>
</div>

</body>
</html>